<template>
   <div class="newsinfo-container" > 
    <!-- <div v-for="item in newsInfolist" :key="item.add_time">
        <div class="newsinfo-title">
            <h1>{{ item.title }}</h1>
        </div>   
        <div class="newsinfo-subtitle">
            <span>发表时间：{{ item.add_time | dataFormat }}</span>
            <span>评论数：{{ item.click }}条</span>
        </div> 
        <div class="newsinfo-content" v-html="item.content"></div> 
    </div> -->


        <div class="newsinfo-title">
            <h1>{{ newsInfolist.title }}</h1>
        </div>   
        <div class="newsinfo-subtitle">
            <span>发表时间：{{ newsInfolist.add_time | dataFormat }}</span>
            <span>评论数：{{ newsInfolist.click }}条</span>
        </div> 
        <div class="newsinfo-content" v-html="newsInfolist.content"></div> 
        <my-comment :id="this.id"></my-comment>
   </div>
</template>
<script>
import { Toast } from "mint-ui"
import myComment from "../subComponents/Comment.vue"
export default {
    data(){
        return {
           newsInfolist:[],
           id: this.$route.params.id, //$route.params接收通过路由传递过来的参数 
           id1:"我是父组件"  
        }
    },
    created(){
        // console.dir(this.newsInfolist.click)
        // console.dir(this.newsInfolist.content)
        // console.dir(this.newsInfolist.title)
        // console.dir(this.newsInfolist.add_time)
        // console.dir(this.newsInfolist.click)
        this.getNewsinfo();
    },
    methods:{
        getNewsinfo(){
            this.$http.get("api/getnew/"+this.id).then( result =>{
                // console.dir(result.body.message)
                if( result.body.status === 0 ){
                    this.newsInfolist = result.body.message[0]
                }else {
                    Toast("加载失败")
                }
            });

        }
    },
    components:{
        myComment
    }
}
</script>
<style lang="scss">
.newsinfo-container {
    padding: 0px 10px;
   .newsinfo-title  {
       padding: 10px 0px;
       h1 {
            font-size: 16px;
            color: red; 
            text-align: center;
       }
       
   } 
   .newsinfo-subtitle {
       display: flex;
       justify-content: space-between;
       color: #2293ff;
       font-size: 12px;
       border-bottom: 1px solid #ccc;
       padding-bottom: 10px;
   }
   .newsinfo-content {
       padding: 30px 0px 20px;
       img {
           width: 100%;
       }
   }
}
</style>


